<template>
	<view :class="['page',{'iphoneX':isIphoneX}]">
		<c-header>
			<view class="header" slot="header">
				<view class="project-total">共<text class="f-red f-wb">{{total}}</text>个项目</view>
				<view class="title">项目列表</view>
				<!-- 项目助理 、项目经理 、超级管理员可创建项目 -->
				<navigator v-if="userInfo.role_id==13||userInfo.role_id==11||userInfo.role_id==1" url="/package_project/created_step-1/created_step-1?type=add" hover-class="none" class="add-btn">+ 创建项目</navigator> 
			</view>
		</c-header>
		<view class="h45">
			<view class="fix-wrap">
				<view class="search-area">
					<view class="search-form">
						<view class="icon iconfont f-s44">&#xe622;</view>
						<input type="text" v-model="params.project_name" class="sc-inp" @confirm="search">
						<view v-if="params.project_name" class="clear-btn iconfont f-s44" @click="clearKeyword">&#xe724;</view>
					</view> 
					<view class="search-page">
						<view class="btn iconfont f-s40" @click="isShowSearch=true">&#xe6e9;</view>
						<view class="mask" v-if="isShowSearch" :style="{'height': 'calc(100% - '+(systemInfo.safeArea.top+90)+'px','top':(systemInfo.safeArea.top+44)+'px'}">
							<view class="search-body a-fadeinR">
								<view class="content-wrap">
									<view class="search-grid">
										<view class="label">项目状态</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.status=='-1'}]" @click="params.status=-1">全部</view>
											<view :class="['item',{'active':params.status==0}]" @click="params.status=0">项目立项</view>
											<view :class="['item',{'active':params.status==1}]" @click="params.status=1">审批中</view>
											<view :class="['item',{'active':params.status==3}]" @click="params.status=3">实施中</view>
											<view :class="['item',{'active':params.status==4}]" @click="params.status=4">报告撰写</view>
											<view :class="['item',{'active':params.status==5}]" @click="params.status=5">验收中</view>
											<view :class="['item',{'active':params.status==6}]" @click="params.status=6">已完成</view>
										</view>
									</view>									 
									<view class="search-grid">
										<view class="label">项目类型</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.project_type=='-1'}]" @click="params.project_type=-1">全部</view>
											<view :class="['item',{'active':params.project_type==0}]" @click="params.project_type=0">红火蚁</view>
											<view :class="['item',{'active':params.project_type==1}]" @click="params.project_type=1">智能设备</view>
											<view :class="['item',{'active':params.project_type==3}]" @click="params.project_type=3">绿色防控</view>
											<view :class="['item',{'active':params.project_type==4}]" @click="params.project_type=4">综合</view>
											<view :class="['item',{'active':params.project_type==5}]" @click="params.project_type=5">其他</view> 
										</view>
									</view>
									<view class="search-grid">
										<view class="label">项目实施</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.ss_status=='-1'}]" @click="params.ss_status=-1">全部</view>
											<view :class="['item',{'active':params.ss_status==0}]" @click="params.ss_status=0">未完成</view>
											<view :class="['item',{'active':params.ss_status==1}]" @click="params.ss_status=1">已完成</view> 
										</view>
									</view>
									<view class="search-grid">
										<view class="label">验收报告</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.ys_status=='-1'}]" @click="params.ys_status=-1">全部</view>
											<view :class="['item',{'active':params.ys_status==0}]" @click="params.ys_status=0">待上传</view>
											<view :class="['item',{'active':params.ys_status==1}]" @click="params.ys_status=1">已上传</view> 
										</view>
									</view>
									<view class="search-grid">
										<view class="label">验收意见</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.yj_status=='-1'}]" @click="params.yj_status=-1">全部</view>
											<view :class="['item',{'active':params.yj_status==0}]" @click="params.yj_status=0">待上传</view>
											<view :class="['item',{'active':params.yj_status==1}]" @click="params.yj_status=1">已上传</view> 
										</view>
									</view>
									<view class="search-grid">
										<view class="label">实施单位</view>
										<view class="search-content status-list company-list">
											<view :class="['item',{'active':params.implementation_unit=='-1'}]" @click="params.implementation_unit='-1'">全部</view>
											<view :class="['item',{'active':params.implementation_unit==item.value}]" v-for="(item,index) in company_list" :key="index" @click="params.implementation_unit=item.value">{{item.label}}</view>											 
										</view> 
									</view>									
									<!-- <view class="search-grid">
										<view class="label">是否有报告</view>
										<view class="search-content">
											<view class="switch"> 
												<switch color="#3399FF" :checked="params." style="transform: scale(0.7);" @change="changeReprotType"></switch> 				 
											</view>		 
										</view>
									</view> -->
									<view class="search-grid">
										<view class="label">报告撰写人</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.report_author_id==-1}]" @click="params.report_author_id=-1">全部</view> 
											<view :class="['item',{'active':params.report_author_id=='-2'}]" @click="params.report_author_id='-2'">有报告</view>
											<view :class="['item',{'active':params.report_author_id=='-3'}]" @click="params.report_author_id='-3'">无报告</view> 
											<!-- <view :class="['item',{'active':params.report_author_id==0}]" @click="params.report_author_id=0">未指派</view> -->
											<view v-if="report_user_list.length>0" :class="['item',{'active':params.report_author_id==item.id}]" v-for="(item,index) in report_user_list" :key="index" @click="params.report_author_id=item.id">{{item.username}}</view>
										</view> 
									</view> 
									<view class="search-grid">
										<view class="label">项目经理</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.responsible_id==0}]" @click="params.responsible_id=0">全部</view> 
											<view :class="['item',{'active':params.responsible_id==item.id}]" v-for="(item,index) in responsible_user_list" :key="index" @click="params.responsible_id=item.id">{{item.name}}</view>											 
										</view> 
									</view>
									<view class="search-grid">
										<view class="label">项目组长</view>
										<view class="search-content status-list">
											<view :class="['item',{'active':params.director==0}]" @click="params.director=0">全部</view> 
											<view :class="['item',{'active':params.director==item.id}]" v-for="(item,index) in director_user_list" :key="index" @click="params.director=item.id">{{item.name}}</view>											 
										</view> 
									</view> 
									<view class="search-grid">
										<view class="label">项目任务</view>
										<view class="search-content status-list"> 
											<view :class="['item',{'active':params.task_status==item.value}]" v-for="(item,index) in taskStatus" :key="index" @click="params.task_status=item.value">{{item.label}}</view>											 
										</view> 
									</view> 
									<view class="search-grid">
										<view class="label">项目省份</view>
										<view class="search-content">
											<view class="date-bar">
												<picker mode="selector" :range="provinceList" range-key="name" class="date" @change="changeProvice">
													<input type="text" v-model="params.province_name" disabled placeholder="选择省份"> 
												</picker> 
											</view>
										</view>
									</view>
									<view class="search-grid">
										<view class="label">合同时间</view>
										<view class="search-content">
											<view class="date-bar">
												<picker mode="date" class="date" @change="changeDate(1,1,$event)">
													<input type="text" v-model="params.start_time" disabled placeholder="开始时间"> 
												</picker>
												<view class="line">~</view>
												<picker mode="date" class="date" @change="changeDate(1,2,$event)">
													<input type="text" v-model="params.end_time" disabled placeholder="结束时间"> 
												</picker>
											</view>
										</view>
									</view>
									<view class="search-grid">
										<view class="label">上传时间</view>
										<view class="search-content">
											<view class="date-bar">
												<picker mode="date" class="date" @change="changeDate(2,1,$event)">
													<input type="text" v-model="params.create_stime" disabled placeholder="开始时间"> 
												</picker>
												<view class="line">~</view>
												<picker mode="date" class="date" @change="changeDate(2,2,$event)">
													<input type="text" v-model="params.create_etime" disabled placeholder="结束时间"> 
												</picker>
											</view>
										</view>
									</view>
								</view>
								<view class="btn-bar">
									<view class="cancle" @click="isShowSearch=false">取消</view>
									<view class="confirm" @click="search">查询</view>
								</view>
							</view>
						</view>
					</view>
				</view> 			 
			</view>
		</view>
		<view v-if="isLogin" class="body">
			<c-loading v-if="loadingState.default" :loadingState="loadingState"></c-loading>
			
			<template v-else>				
				<view v-if="list.length>0" class="project-list">
					<view v-if=" 
								 (userInfo.role_id==18 || userInfo.role_id==1)    // 超级管理员
								 || (userInfo.department_id==31 || userInfo.department_id==29 || userInfo.department_id==10|| userInfo.department_id==47)  // 财务部 总经办 综合部
								"
					class="price-total m-b2">						
						<view>总金额(元):<text class="f-red f-wb">{{total_amount}}</text></view>
						<view>已回款(元):<text class="f-red f-wb">{{back_amount}}</text></view>
					</view>
					<!-- 超级管理员 -->
					<template>
						<view class="item m-b2" v-for="(item,index) in list" :key="index">
							<view class="hd">
								<view class="title">
									<view class="name">{{item.project_name}}</view>
									<view class="status">
										<text v-if="item.status==0" class="blue">项目立项</text>
										<text v-if="item.status==1" class="orange">审批中</text>
										<text v-if="item.status==2" class="blue">审批完成</text>									 
										<text v-if="item.status==3" class="blue">实施中</text>
										<text v-if="item.status==4" class="blue">报告撰写</text>
										<text v-if="item.status==5" class="blue">验收中</text>
										<text v-if="item.status==6" class="green">已完成</text>  
										<text v-if="item.status==7" class="red">审批不通过</text> 		
									</view>
								</view>
								<view class="date">{{item.start_time}}~{{item.end_time}}</view>
							</view>
							<navigator :url="'/package_project/project-detail/project-detail?id='+item.id" hover-class="none" class="content"> 
								<view class="s-item">
									<view class="label">项目经理：</view>
									<view class="val">{{item.responsible_name||'未指派'}}</view>
								</view>
								<view class="row-2">
									<view class="s-item">
										<view class="label">项目金额：</view>
										<view class="val f-red f-wb">{{item.amount}}</view>
									</view>
									<view class="s-item">
										<view class="label">回款金额：</view>
										<view class="val f-red f-wb">{{item.finish_monback}}</view>
									</view>
								</view> 						
								<!-- <view class="s-item m-b1">
									<view class="label">实施进度：</view>
									<view class="val">
										<view class="progress">
											<view class="kd" :style="'width: '+item.task_pace.toFixed(0)+'%;'"></view>
										</view>
										<view class="progress-data">{{item.task_pace.toFixed(0)}}%</view>
									</view>
								</view> -->
								<view class="s-item m-b1">
									<view class="label">项目进度：</view>
									<view class="val">
										<view class="project-progress"> 
											<view class="p-item">
												<view class="progress">
													<view class="kd" :style="'width: '+item.task_pace.toFixed(0)+'%;'"></view>
													<text>实施:{{item.task_pace.toFixed(0)==0?'0':item.task_pace.toFixed(0)+'%'}}</text>
												</view>
											</view>
											<view class="p-item">
												<view class="progress">
													<view class="kd" :style="'width: '+(item.yj_status==0?'0':'100')+'%'"></view>
													<text>报告:{{item.yj_status==0?'0':'100%'}}</text>
												</view>
											</view> 
											<view class="p-item">
												<view class="progress">
													<view class="kd" :style="'width: '+item.ys_status==0?'0':'100'+'%;'"></view>
													<text>验收:{{item.ys_status==0?'0':'100%'}}</text>
												</view>
											</view> 
										</view> 
									</view>
								</view>
								<view v-if="item.status==6" class="finish-icon"><image src="@/static/images/gq_icon.png" mode="widthFix"></image></view>
							</navigator>
							<view class="bottom">
								<view class="left">
									<template v-if="item.status==3&&item.task_pace.toFixed(0)<100">										
										<template v-if="item.warn_level==1"><view class="btn red">逾期</view></template>        <!-- 逾期 -->
										<template v-if="item.warn_level==2"><view class="btn green">1级预警</view></template>     <!-- 5天预警 -->
										<template v-if="item.warn_level==3"><view class="btn yello">2级预警</view></template>    <!-- 10天预警 -->
										
										<template v-if="item.has_delay==0">
											<view v-if="item.warn_level<=3&&item.responsible==userInfo.id" class="btn orange" @click="setEndDate(index)">
											 	<template>申请延期</template> 
											</view> 
										</template>
										<template v-else>
											<navigator v-if="item.approver==userInfo.id" url="/package_msg/msg-list/msg-list?type=5" hover-class="none" class="btn orange">延期申请</navigator>
											<view v-else class="btn grey">延期申请中</view> 											
										</template>										
									</template>									
								</view>
								<view class="right">
									<navigator v-if="(item.status==0||item.status==7)&&item.user_id==userInfo.id" :url="'/package_project/created_step-1/created_step-1?type=edit&id='+item.id" hover-class="none" class="btn blue">编辑</navigator> 							
									<view v-if="item.warn_level>0&&item.status>=3&&item.status!=7&&item.approver==userInfo.id" class="btn orange" @click="supervise(index)">督办</view>
									<view v-if="item.status==1&&item.user_id==userInfo.id" class="btn orange" @click="urge(index)">催审</view>
									<navigator v-if="item.status==0&&item.user_id==userInfo.id" :url="'/package_project/created_step-5/created_step-5?id='+item.id" hover-class="none" class="btn orange">发送审批</navigator>
									<navigator v-if="item.status==1&&item.approver==userInfo.id" url="/package_msg/msg-list/msg-list?type=0" hover-class="none" class="btn orange">去审批</navigator>									
								</view>
							</view>
						</view>
					</template>
					
					<c-loading :loadingState="loadingState"></c-loading>
				</view>
				
				<c-empty v-else></c-empty>
			</template>
			 
		</view>
		
		<c-nav-project :switchTab="3"></c-nav-project>
		 
		<view v-if="flag.isFullPage" class="full-fix-page">
			<template>			
				<!-- 申请延期 -->
				<view v-if="flag.isSetDate" class="popup-wrap a-fadein">
					<view class="popup-type-model">
						<view class="close-btn iconfont f-s44" @click="showPopup('hide')">&#xeb6a;</view>
						<view class="popup-body">
							<view class="title">申请延期</view>
							<view class="content">
								<view class="inp-bar m-b2">
									<view class="label">延期原因</view>
									<textarea class="inp-textarea" v-model="setDate.content" placeholder="输入延期原因"></textarea> 
								</view>
								<view class="inp-bar m-b2">
									<view class="label">合同结束日期</view>
									<input type="text" class="inp-input f-grey" disabled v-model="setDate.project.end_time" placeholder="输入新名称">
								</view> 
								<view class="inp-bar m-b2">
									<view class="label">延期日期</view>
									<picker class="inp-picker" mode="date" @change="setNewEndTime">
										<input type="text" class="inp-input" disabled v-model="setDate.new_end_time" placeholder="选择延期日期">
										<view class="iconfont">&#xec35;</view>
									</picker>
								</view>
								<view class="comfirm-btn" @click="applyDate">确定</view>
							</view>
						</view>
					</view>
				</view>		
			</template> 
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isLogin:false,
				userInfo:uni.getStorageSync('userInfo'),
				systemInfo:getApp().globalData.systemInfo,
				isIphoneX:getApp().globalData.isIphoneX,
				loadingState:{
					default:true,
					loading:false,
					completed:false
				},
				list:[],
				total:0,
				type:'-1',
				isShowSearch:false,
				currentIndex:'',
				params:{
					page: 1,
					limit: 10,
					project_name: '',
					report_author_id:'-1',
					responsible_id:'0',
					director:'0',
					user_name: '',
					status: '-1',
					project_type:'-1',
					start_time:'',
					end_time:'',
					implementation_unit:'-1',
					ys_status:'-1',
					ss_status:'-1',
					yj_status:'-1',
					create_stime:'',
					create_etime:'',
					ishas_report:'0'    ,// 1有报告2无报告0不限
					province_id:'0',
					province_name:'',
					task_status:'-1'
				},
				warn_level:'',
				taskStatus:[],
				flag:{
					isFullPage:false,
					isSetDate:false
				},
				setDate:{
					project:{}, 
					new_end_time:'',
					content:''
				},
				isStop:true,
				roleList:[],
				report_user_list:[],
				responsible_user_list:[],
				company_list:[],
				total_amount:'',
				back_amount:'',
				provinceList:[],
				director_user_list:[]
			}
		},
		async onLoad(params) { 
			this.isLogin=await this.$loginState('check');  
			
			if(params.status){
				this.params.status=params.status;
			}
			if(params.warn_level){
				this.warn_level=params.warn_level;
			}
			if(this.isLogin){ 				
				this.roleListsel();
				this.provinceList=await this.regionnext();
				this.company_list=await this.companylistsel();
				this.report_user_list=await this.getReportList();
				this.responsible_user_list=await this.getresponsible();
				this.director_user_list=await this.projectdirector();
				this.taskStatus=this.$mock_data.rwStatus;
				this.getList();
				
			}
		},
		onShow() {
			 
		},
		onReachBottom(){
			if(this.loadingState.completed){ 
				this.params.page=1;
				return false
			}else{
				if(this.list.length<this.total&&this.list.length>0){
					this.params.page++; 
					this.getList(); 
				} 
			}	 
		},
		methods: {
			async regionnext(){
				let res=await this.$api.user_api.regionnext(); 
				if(res.data.code==200){
					return res.data.data					 
				}
			},
			
			async projectdirector(){
				let res=await this.$api.user_api.projectdirector();  
				if(res.data.code==200){
					return res.data.data					 
				}
			},			
			
			changeProvice(e){
				let index=e.target.value;
				this.params.province_name=this.provinceList[index].name;
				this.params.province_id=this.provinceList[index].id;
			},
			
			async companylistsel(){
				let res=await this.$api.user_api.companylistsel(); 
				if(res.data.code==200){
					return res.data.data					 
				}
			},
			
			// 获取管理员角色
			async roleListsel(){
				let res=await this.$api.user_api.roleListsel(); 
				if(res.data.code==200){
					this.roleList=res.data.data;
				}
			},
			
			// 获取综合部人员 
			async getReportList() {
				let res = await this.$api.user_api.userListBydep({ 
					department_id:10
				}) 
				console.log(res)
				if (res.data.code == 200) {		 
					return res.data.data[0].ulist
				}
			},
			
			// 获取项目经理
			async getresponsible() {
				let res = await this.$api.user_api.getresponsible();
				console.log(res)
				if (res.data.code == 200) {		 
					return res.data.data
				}
			},
			
			
			
			// 切换类型
			changeType(type){
				this.params.status=type;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list=[];
				this.params.page=1;
				this.getList();
			},
			
			// 选择日期
			changeDate(ctype,type,e){
				// type 1 开始时间  2 结束时间 					
				if(ctype==1){
					if(type==1){
						this.params.start_time=e.target.value;
					}
					if(type==2){
						this.params.end_time=e.target.value;
					}
				}
				if(ctype==2){
					if(type==1){
						this.params.create_stime=e.target.value;
					}
					if(type==2){
						this.params.create_etime=e.target.value;
					}
				}
				
			},
			
			// 筛选逾期项目
			selectYq(e){ 
			},
			
			async getList() {
				console.log(23424234,this.params)
				let res = await this.$api.project_api.getList(this.params);  
				 console.log(res)
				if (res.data.code == 200) { 
					this.loadingState.default=false;
					let date=new Date();
					let nowTime=date.getTime();  
					res.data.data.list.forEach(item=>{
						let diff_time=new Date(item.end_time)-nowTime;						
						let day=diff_time/(24*60*60*1000); 
						if(day<=10&&day>5){
							item.warn_level=3
						}else if(day<=5&&day>0){
							item.warn_level=2
						}else if(day<=0){
							item.warn_level=1
						} 
						item.amount=this.$moneyToFormat(item.amount);
						item.finish_monback=this.$moneyToFormat(item.finish_monback);	 
					})
					this.total = res.data.data.count;
					this.list = this.list.concat(res.data.data.list);  
					if(this.list.length<res.data.data.count){
						this.loadingState.loading=true;
					}else{
						this.loadingState.loading=false;
						this.loadingState.completed=true;
					}
					this.getTotalPrice();
				} else {
					this.loading = false;
					uni.showToast({
						icon:'error',
						title:res.data.msg,
						mask:true
					})
				} 				
			},
			
			async getTotalPrice() { 
				let res = await this.$api.user_api.projectindex({ 
					project_name: this.params.project_name,
					user_name: this.params.user_name,
					status: '-1',
					implementation_unit: '-1',
					director: this.params.director,
					start_time: this.params.start_time,
					end_time: this.params.end_time,
					create_stime: this.params.create_stime,
					create_etime: this.params.create_etime,
					responsible_id:this.params.responsible_id,
					report_author_id:this.params.report_author_id,
					isstat: 1 
				
				});   
				console.log(res)
				if(res.data.code == 200){
					this.total_amount= this.$moneyToFormat(res.data.data.total_amount);
					this.back_amount= this.$moneyToFormat(res.data.data.back_amount);
				}
				
			},
		
			// 催审
			async urge(idx){
				let project=this.list[idx];				
				let res=await this.$api.user_api.addMsg({
					project_id:project.id, 
					task_id:'',
					content:'《'+project.project_name+'》项目，请您尽快到【项目审批消息】中完成审批！',
					user_id:project.approver,
					type:1,
					content_type:4,
					title:'关于《'+project.project_name+'》项目催促审批的消息'
				});    
				if(res.data.code==200){
					this.$showToast({
						icon:'success',
						title:'催审成功'
					})
				}
			},
			
			// 督办
			async supervise(idx){
				let pro_detail=this.list[idx];
				let res=await this.$api.user_api.addMsg({
					project_id:pro_detail.id, 
					task_id:'',
					content:'《'+pro_detail.project_name+'》项目，即将到合同日期，请加快项目的实施进度，按时完成项目',
					user_id:pro_detail.responsible,
					type:1,
					content_type:1,
					title:'关于《'+pro_detail.project_name+'》项目督办的消息'
				});    
				if(res.data.code==200){
					this.$showToast({
						icon:'success',
						title:'督办成功'
					})
				}
			},
			
			// 搜索关键词
			search() {
				this.isShowSearch=false;
				this.list = [];
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.params.page=1;
				this.getList();
			},
			
			// 清空关键词
			clearKeyword() {
				this.params.project_name = '';
				this.params.page=1;
				this.loadingState={
					default:true,
					loading:false,
					completed:false
				};
				this.list = [];
				this.getList();
			},
			
			// 打开弹窗
			showPopup(t, n) { 
				if (t == 'show') {
					this.flag.isFullPage = true;
					this.flag[n] = true;
				} else if (t == 'hide') {
					for (let i in this.flag) {
						this.flag[i] = false;
					}
				}
			},
			
			// 申请延期
			setEndDate(idx){
				this.showPopup('show','isSetDate'); 
				this.currentIndex=idx;
				this.setDate.project=this.list[idx];
				this.setDate.end_time=this.setDate.project.end_time; 
				// this.list[idx].has_delay=1;
			},
			
			// 设置新结束日期
			setNewEndTime(e){ 
				this.setDate.new_end_time=e.target.value;
			},
			
			async applyDate(){
				if(this.setDate.content==''){
					this.$showToast({
						title:'请输入申请延期原因'
					})
					return
				}
				if(this.setDate.new_end_time==''){
					this.$showToast({
						title:'请选择延期日期'
					})
					return
				}
				
				if(this.isStop){
					this.isStop=false;
					// 发送延期申请消息
					let sp_res=await this.$api.user_api.addMsg({
						project_id:this.setDate.project.id, 
						task_id:'',
						content:'由于【'+this.setDate.content+'】的原因，【'+this.setDate.project.responsible_name+'】申请《'+this.setDate.project.project_name+'》项目延期至'+this.setDate.new_end_time+'，请您审批！',
						user_id:this.setDate.project.approver,
						type:1,
						content_type:5,
						delay_time:this.setDate.new_end_time,
						title:'关于《'+this.setDate.project.project_name+'》项目申请延期的消息'
					});  
					if(sp_res.data.code==200){
						this.showPopup('hide');
						this.list[this.currentIndex].has_delay=1;
						this.$store.commit('PROJECT_LIST_UPDATE',1);
						this.$showToast({
							icon:'success',
							title:'发送申请成功'
						})
					} 
				}
			}
		
		},
		computed:{
			
			list_update(){
				return this.$store.state.project_list
			}, 
			// 任务列表更新，列表进度更新
			task_list_update(){
				return this.$store.state.task_list_state
			}
		},
		watch:{
			list_update(newer,older){  
				if(newer!=older){ 
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.params.page=1;
					this.list=[];
					this.getList(); 
				}
			},
			
			task_list_update(newer,older){ 
				if(newer!=older){
					this.loadingState={
						default:true,
						loading:false,
						completed:false
					};
					this.params.page=1;
					this.list=[];
					this.getList(); 
				}
			}
		}
		
	}
</script>

<style lang="less">
	.project-total{
		position: absolute;
		left:10px;
		top:11px; 
		height:20px;
		line-height: 20px; 
		font-size: 30rpx;
	}
	.project-progress{
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 80%;
		height: 36rpx;
		background: #ccc;
		border-radius: 38rpx;
		color:#fff;
			
		.p-item{
			width: 33.3%;
			flex-shrink: 0; 
			height: 36rpx;
			line-height: 36rpx;
			text-align: center;
			font-size: 24rpx;
			border-right:1rpx solid #fff;
			.progress{
				position: relative;  
				height:36rpx; 
				border-radius: 15rpx; 
				.kd{
					position: absolute;
					left:0;
					top:0;
					height:36rpx;
					border-radius: 15rpx;
					background: #09f;
				}
				text{
					position: absolute;
					left:0;
					top:0;
					width: 100%;
					text-align: center;
					font-size: 24rpx;
					color: #333;
				}
			}
			.progress-data{
				font-size: 28rpx;
			}	
			
			&:last-child{
				.progress{
					.kd{
						border-right: 0 none;
						border-top-right-radius: 38rpx;
						border-bottom-right-radius: 38rpx; 
					}
				}
				
			}
			&:first-child{
				.progress{
					.kd{
						border-top-left-radius: 38rpx;
						border-bottom-left-radius: 38rpx;
					}
				}
				
			}
		}
		.active{
			background: #09f; 
		}
	}
	.price-total{
		display: flex;
		justify-content: space-between;
		align-items: center;	
		margin: 0 30rpx;
		font-size: 28rpx;
	} 
	.project-list{
		padding-top:20rpx;
		.item{
			padding:0 20rpx;
			margin: 0 30rpx;
			background: #fff;
			border-top: 5rpx solid #09f;
			border-radius: 15rpx;
			.hd{
				padding:15rpx 0;
				border-bottom: 1rpx solid #eee;		
			}
			.date{
				color:#999;
				font-size: 24rpx;
			}
			.title {
				display: flex;
				justify-content: space-between;
				align-items: center;						
				.name{
					margin-right: 10rpx;
					font-size: 30rpx;
				}
				.status{
					flex-shrink: 0;
					text{
						border-radius: 5rpx;
						padding:2rpx 5rpx;
					}
				}
				.blue{
					border:1rpx solid #09f;
					color:#09f;
				}
				.red{
					border:1rpx solid #f00;
					color:#f00;
				}
				.grey{
					border:1rpx solid #ccc;
					color:#ccc;
				}
				.orange{
					border:1rpx solid #ff9600;
					color:#ff9600;
				}
				.green{
					border:1rpx solid green;
					color:green;
				}
			}
			.content{
				position: relative;
				padding:20rpx 0 0;
				.finish-icon{
					position: absolute;
					right:0;
					top:0;
					width:180rpx;
					image{
						width: 100%;
					}
				}
				.row-2{
					display: flex;
					justify-content: space-between;
				}
				.s-item{
					display: flex;
					align-items: center;
					margin-bottom: 10rpx;
					font-size: 26rpx;
					color:#666;
					.label{
						width: 140rpx;
						flex-shrink: 0;
					}
					.val{
						display: flex;
						align-items: center;
						flex-grow: 2;
					}
				}
				 		
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				// padding:20rpx 0;
				margin-top: 10rpx;
				border-top: 1rpx solid #eee;
				.left{
					display: flex;
					.btn{
						margin-right: 20rpx;
					}
				}
				.right{
					display: flex;
					justify-content: flex-end;
					.btn{
						margin-left: 20rpx; 
					}
				}
				.btn{ 
					padding:0 10rpx;
					margin: 20rpx 0;
					border-radius: 10rpx;
					font-size: 28rpx;
					color:#fff;
				}
				.blue{
					background:#09f; 
				}
				.red{
					background:#f00; 
				}
				.grey{
					background:#ccc; 
				}
				.yello{
					background:#00ff00;
				}
				.green{
					background:#00aa00;
				}
				.orange{
					background: #ff9600;
				}
			}
		}
	} 
	.add-btn{ 
		position: absolute;
		right:10px;
		top:11px; 
		height:20px;
		line-height: 20px;
		padding:0 5px;
		text-align: center;  
		border: 1rpx solid #09f;
		border-radius: 10rpx;
		color:#09f;
		font-size: 12px; 
	}
	.search-grid{ 
		padding:20rpx;
		.label{
			margin-bottom: 20rpx;
			font-size: 26rpx;
			font-weight: bold;
		}
	}
	.date-bar{
		display: flex;
		align-items: center;
		.date{
			border: 1rpx solid #eee;
			border-radius: 10rpx; 					
			input{
				height: 50rpx;
				line-height: 50rpx;	
				padding:0 10rpx;
				font-size: 24rpx;
			}
		}
		.line{
			margin: 0 20rpx;
		}
	}
	.status-list{
		display: flex;
		// justify-content: space-between;
		flex-wrap: wrap;
		.item{
			width: 31%;
			padding:10rpx 0;
			margin-bottom: 20rpx;
			margin-right: 10rpx;
			text-align: center;
			background: #f5f5f5;
			border-radius: 38rpx;
			font-size: 24rpx;
		}
		.active{
			background: #09f;
			color:#fff;
			font-weight: bold;
		}
	}
	.company-list{
		display: block;
		.item{
			width: 100%;
		}
	}
</style>
